<template>
	<!-- 整体大布局 -->
	<div class="icons swiper-container">
		<!-- 滑动区域 -->
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item,index) in result">
				<div class="icons-item" v-for="txt in item" :key ='txt.id'>
					<img :src="txt.imgUrl" />
					<p>{{txt.title}}</p>
				</div>
			</div>
		</div>
		<!--  -->
	</div>
</template>

<script>
	import Swiper from 'swiper';
	export default{
		props:['IconList'],
		
		data(){
			return{
				
			}
		},
		mounted(){
			new Swiper('.icons',{
				//重复轮播
				loop: true,
				observer :true,
				observeParents:true,
			})
		},
		computed:{
			result(){
				//1.设置一个空数组【一维数组】
				var arr = [];
				//2.forEach 遍历 item:数组元素 ；index：下标
				this.IconList.forEach( (item,index)=>{
					//计算index下标/8 的向下取整结果
					var idx = Math.floor(index/8);
					if( !arr[idx] ){
						arr[idx] = [];
					}
					arr[idx].push(item)
				})
				return arr; 
			}
		}
	}
</script>

<style scoped>
	.icons{
		width: 100%;
		padding-bottom: 0.2rem;
		padding-top: 0.2rem;
		background-color: white;
	}
	.icons-item{
		/* background-color: #CCCCCC; */
		width: 25%;
		padding-bottom: 25%;
		height: 0;
		float: left;
	}
	.icons-item img{
		width: 1.1rem;
		height: 1.1rem;
		display: block;
		margin: 0 auto;
	}
	.icons-item p{
		font-size: 0.32rem;
		text-align: center;
		color: #212121;
		margin-top: 0.2rem;
	}
</style>
